<template>
  <!-- 发布规格 租箱、求租、回调、售箱 共用组件-->
  <div>
    <div v-if="priceList.length" style="width: 100%;height: 30px;background-color: #efefef;margin-bottom: -30px;"></div>
    <div v-for="(item, index) in priceList" :key="index">
      <el-form :disabled="disabled" inline label-position="left" style="min-width: 720px;"
        :class="(index == priceList.length - 1 && isExist) ? 'last-item' : ''">
        <el-form-item style="width:40px;margin-right: -5px;">
          <div v-show="!index"> &nbsp;</div>
          <div style="width:100%;height: auto">
            <el-button @click="handleDeletePriceList(index)" icon="Minus" size="small" circle plain></el-button>
          </div>
        </el-form-item>

        <el-form-item style="width:100px;">
          <div v-show="!index" class="marginAuto">箱型</div>
          <el-select v-model="item.boxType" style="width:100%" @change="priceListSyncInventory" placeholder="选择箱型">
            <el-option v-for="item in boxTypeOptions" :disabled="item.disabled" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="width:100px">
          <div v-show="!index" class="marginAuto">箱况</div>
          <el-select v-model="item.boxCondition" style="width:100%" @change="priceListSyncInventory" placeholder="选择箱况">
            <el-option v-for="item in boxCaseOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="width:150px">
          <el-row v-show="!index" style="width:100%;" justify="center" align="middle">
            <el-col :span="5">币种</el-col>
            <el-col :span="12">
              <el-select size="small" v-model="param.currency" style="margin-top: -3px;" @change="switchCurrency">
                <el-option label="人民币" value="CNY" />
                <el-option label="美元" value="USD" />
              </el-select>
            </el-col>
          </el-row>
          <el-row justify="center" style="width:100%;">
            <el-col :span="24" class="text-center">
              <span v-if="param.currency == 'CNY'">人民币(CNY)</span>
              <span v-if="param.currency == 'USD'">美元(USD)</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="width:150px">
          <div v-show="!index" class="marginAuto">箱标</div>
          <el-select v-model="item.totalWeight">
            <el-option label="32500KG" value="32500KG" />
            <el-option label="30480KG " value="30480KG" />
            <el-option label="30480/32500KG " value="30480/32500KG" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 120px;">
          <div v-show="!index" class="marginAuto">
            单价
            <span v-if="param.currency == 'USD'"> &nbsp;$&nbsp; </span>
            <span v-if="param.currency == 'CNY'" style="font-weight: 700;"> &nbsp;￥ </span>
          </div>
          <div style="width:100%;">
            <el-input-number v-model="item.unitPrice" :controls="false" :min="1" :max="99999" :precision="2"
              placeholder=" < 100000" @blur="item.unitPrice = item.unitPrice ? item.unitPrice : 1" style="width:100%">
            </el-input-number>
          </div>
        </el-form-item>
        <el-form-item style="width:120px">
          <div v-show="!index" class="marginAuto">数量</div>
          <el-input-number v-model="item.inventory" :disabled="false"
            @blur="item.inventory = item.inventory ? item.inventory : 0" :min="0" :max="9999" />
        </el-form-item>
        <el-form-item v-if="isHuiDiao_boxEast" style="width:120px">
          <div v-show="!index" class="marginAuto">可用库存</div>
          <el-input-number v-model="item.inventoryMax" disabled :min="0" :max="9999" />
        </el-form-item>
      </el-form>
    </div>
    <div style="width:100%;height: 40px;border-bottom:1px solid  #efefef; ">
      <el-button :disabled="disabled" @click="handleAddPriceList" icon="Plus" type="info" size="small" circle plain>
      </el-button>
      <span style="font-size: 12px;padding-left: 10px">增加信息</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, watch, computed ,onActivated} from 'vue'

const emit = defineEmits(['valueSent',"currency"]);

const props = defineProps({
  //公共
  priceList: {
    type: Array,
    default: () => []
  },
  disabled: { type: Boolean, default: false },
  //租箱
  numArry: {
    type: Array,
    default: () => []
  },
  isRent: { // 是否为租箱
    type: Boolean,
    default: false
  },
  isSell: { // 卖箱使用组件时，须为true
    type: Boolean,
    default: false
  },
  isOutBox: { // 外调箱 10-否 5-是 
    type: Number,
    default: 10
  },
  isHuiDiao_boxEast: { // 弃用
    type: Boolean,
    default: false
  },

})

const param = reactive({
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: 5, label: '40HQ', },
    { value: 10, label: '40GP', },
    { value: 15, label: '20HQ', },
    { value: 20, label: '20GP', },
  ],
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: 15, label: '适货' },
    { value: 10, label: '次新' },
    { value: 20, label: '混提' },
    { value: 5, label: '全新' },
  ],
  currency:"CNY",
  totalWeight:"32500KG"

})
onActivated(() =>{
  if(props.isSell){
    param.boxCaseOptions = [
      { value: 5, label: '全新' },
      { value: 10, label: '次新' },
      { value: 15, label: '适货' },
    ]
  }

})
// watch(() => props.priceList, () => {
//   if (props.isOutBox == 10) {// 外调箱 10-否 5-是 
//     if (props.isSell) return // 卖箱时不调用库存
//     props.priceList.forEach((price: any) => {
//       price.inventory = getNum(price.boxCondition, price.boxType)
//     })
//   } else {
//     props.priceList.forEach((price: any) => {
//       price.inventoryMax = getNum(price.boxCondition, price.boxType)
//     })
//   }
// })

//新增 出租箱规格
const handleAddPriceList = () => {
  const boxTypeOption = boxTypeOptions.value.find(item => item.disabled == false)
  if (isExist.value) return
  addPriceList(boxTypeOption)
  //发布租箱 更新list库存量(外调箱 箱量手填)
  sendMoneyType()
  // if (props.isRent && props.isOutBox == 10) {// 外调箱 10-否 5-是  
  //   props.priceList.forEach((price: any) => {
  //     price.inventory = getNum(price.boxCondition, price.boxType)
  //   })
  // }
  
}

const addPriceList = (boxTypeOption: any) => {
  let price: any = {}
  if (props.isRent && props.priceList.length == 0) {
    price = { boxType: 5, boxCondition: 15, unitPrice: 1, totalWeight: "32500KG", inventory: 0, currency: 'CNY' }
  } else {
    price = props.priceList[props.priceList.length - 1] //新增 默认copy最后一行的数据
  }
  const data = JSON.parse(JSON.stringify(price))
  data.boxType = boxTypeOption.value
  data.unitPrice = 1
  props.priceList.push(data)
}

const isExist = computed(() => {
  const lastPrice = props.priceList[props.priceList.length - 1]
  const priceList = props.priceList.filter(item => item.boxType == lastPrice.boxType && item.boxCondition == lastPrice.boxCondition )
  return priceList.length > 1
})

//删除
const handleDeletePriceList = (index: any) => {
  if (props.priceList.length == 1) {
    ElMessage.error('至少保留一个')
    return
  }
  props.priceList.splice(index, 1)
}

//  更新priceList库存量
const priceListSyncInventory = () => {
}

// 获取库存量
const getNum = (boxCondition, boxType) => {
  let num = 0
  if (boxCondition == 20) { // 20-混提
    props.numArry.filter((item: any) => {
      if (item.boxType == boxType && item.boxCondition != 5) {
        if (item.inventory < 0) return
        num += item.inventory || 0
      }
    })
  } else {
    const obj = props.numArry.find((item: any) => item.boxType == boxType && item.boxCondition == boxCondition)
    if (obj) {
      num = obj.inventory || 0
    }
  }
  return num
}

//计算 可用箱型
const boxTypeOptions = computed((val: any) => {
  param.boxTypeOptions.forEach((type: any) => {
    type.num = 0
    props.priceList.forEach(price => {
      if (price.boxType == type.value) {
        type.num++
      }
    })
    if (type.num >= 4) {
      type.disabled = true
    } else {
      type.disabled = false
    }
  })
  return param.boxTypeOptions
})

//计算 可用箱况
const boxCaseOptions = computed(() => {
  param.boxCaseOptions.forEach((type: any) => {
    type.num = 0
    props.priceList.forEach(price => {
      if (price.boxType == type.value) {
        type.num++
      }
    })
    if (type.num >= 4) {
      type.disabled = true
    } else {
      type.disabled = false
    }
  })
  return param.boxCaseOptions
})



//获取价格列表
const getPriceList = () => {
  return props.priceList
}

//每种箱型对应的币种信息
const sendMoneyType = () =>{
  const monyType = []
  props.priceList.forEach((type:any)=>{
    if(type.currency && !monyType.includes(type.currency)){
      monyType.push(type.currency)
    }
  })
  emit('valueSent',monyType)
  // return monyType
}
//  切换求租箱规格币种
const switchCurrency = (val:string) => {
  props.priceList.forEach((item:any)=>{
    item.currency = val
  })
  emit("currency",val)
}

defineExpose({
  isExist,
  getPriceList,
  priceListSyncInventory
})
</script>
<style scoped>
.last-item {
  border: 1px solid red;
}

</style>
